<script setup lang="ts">
import { NConfigProvider, NPopover, NButton, NAvatar } from 'naive-ui'
import { computed, ref, watch, onMounted, onBeforeMount, defineAsyncComponent } from 'vue'
import { NaiveProvider } from '@/components/common'
import { useTheme } from '@/hooks/useTheme'
import { useLanguage } from '@/hooks/useLanguage'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useAppStore, useChatStore } from '@/store'
import type { Theme } from '@/store/modules/app/helper'
import { SvgIcon } from '@/components/common'
import { useUserStore } from '@/store'
import defaultAvatar from '@/assets/avatar.jpg'
import { isString } from '@/utils/is'
import { UserInfo } from "@/typings/user"
import { getUserInfo, loginOut } from "@/api/user"
import { useRouter, useRoute } from 'vue-router'
const PoPupDialogs = defineAsyncComponent(() => import('@/components/common/PoPupDialogs/index.vue'))
import { record } from '@/components/common'
import { userCenter } from '@/components/common'
import { tradeCenter } from '@/components/common'

const show = ref<boolean>(false)
const showUserInfo = ref<boolean>(false)
const showTradeCenter = ref<boolean>(false)

const { theme, themeOverrides } = useTheme()
const { language } = useLanguage()
const { isMobile } = useBasicLayout()

const appStore = useAppStore()

const userStore = useUserStore()

let userInfo = ref(computed(() => userStore.userInfo))

watch(
	userInfo,
	(val) => {
		userStore.updateUserInfo(val)
	}
)
const showRecord = ref(false)
const setTheme = computed(() => appStore.theme)
const themeOptions: { label: string; key: Theme; icon: string }[] = [
	{
		label: 'Auto',
		key: 'auto',
		icon: 'ri:contrast-line',
	},
	{
		label: 'Light',
		key: 'light',
		icon: 'ri:sun-foggy-line',
	},
	{
		label: 'Dark',
		key: 'dark',
		icon: 'ri:moon-foggy-line',
	},
]

function changeTheme() {
	let value = setTheme.value;
	if (value == 'light') {
		appStore.setTheme('dark')
	} else {
		appStore.setTheme('light')
	}

}

function alterTishi() {
	alert("还没开放")
}

function showUserMoney() {
	showRecord.value = !showRecord.value;
}

const router = useRouter()
function login() {
	router.push('/login')
}

function showPoPup() {
	show.value = true
}

async function showUserCenter() {
	try {
		let newUserInfo = await getUserInfo<UserInfo>()
		if (newUserInfo && newUserInfo.user.userId) {
			userStore.updateUserInfo(newUserInfo.user)
			showUserInfo.value = true
		}
	} catch (e) {
		userStore.userInfo = {};
		router.push('/Login')
	}
}


function showUserTradeCenter() {
	showTradeCenter.value = true
}
const route = useRoute()

onMounted(() => {
	if (route.name == 'Chat') {
		activeIndex.value = 0
	} else if (route.name == 'apiChat') {
		activeIndex.value = 1
	} else if (route.name == 'aide') {
		activeIndex.value = 2
	} else if (route.name == 'Draw') {
		activeIndex.value = 3
	}
})


const activeIndex = ref(0)
function handleButtonClick(index) {
	activeIndex.value = index;
	if (index == 0) {
		if (route.name !== 'Chat') {
			router.push('/chat')
		}
	} else if (index == 1) {
		if (route.name !== 'apiChat') {
			router.push('/api/chat')
		}
	} else if (index == 2) {
		if (route.name !== 'aide') {
			router.push('/aide')
		}
	} else if (index == 3) {
		if (route.name !== 'Draw') {
			router.push('/draw')
		}
	} else {
		router.push('/')
	}
}

</script>

<template>
	<div v-if="!isMobile" class="left-div">
		<div
			class="flex min-w-[70px] items-center justify-center bg-[#f7faff] px-2 py-4 dark:bg-[#25272d] dark:border-[#3a3a40] border-#efeff5-800 flex-col w-sider h-full border-r">
			<!-- <a href="/" class="router-link-active">
				<img src="/src/assets/avatar.jpg" class="py-4 w-10 border-b cursor-pointer px=0 dark:border-[#ffffff17] border-#ebebeb-400" alt="">
			</a> -->
			<main class="flex flex-col items-center flex-1 pt-5 flex-grow-1">
				<div class="flex flex-col space-y-4">

					<span aria-current="page"
						:class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify--ri': activeIndex === 0 }"
						@click="handleButtonClick(0)">
						<n-popover :overlap="overlap" placement="right">
							<template #trigger>
								<div
									class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">
									<div class="flex h-full">
										<div class="m-auto text-center">
											<SvgIcon icon="basil:chat-solid" width="28" height="28" />
										</div>
									</div>
								</div><!---->
							</template>
							<span class="text-[#4b9e5f] dark:text-[#86dfba]">AI会话</span>
						</n-popover>
					</span>


					<!-- <span aria-current="page"  :class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify--ri': activeIndex === 1 }" @click="handleButtonClick(1)">
				
						<n-popover :overlap="overlap" placement="right"  >
							<template #trigger>
						<div class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">
							<div class="flex h-full">
								<div class="m-auto text-center">
									<SvgIcon icon="icon-park-solid:tool" width="28" height="28" />
								</div>
							</div>
						</div>
							</template>
							<span  class="text-[#4b9e5f] dark:text-[#86dfba]">AI对话测试工具</span>
						</n-popover>
					</span> -->

					<!--					<span :class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify&#45;&#45;ri': activeIndex === 2 }" @click="handleButtonClick(2)">&lt;!&ndash;&ndash;&gt;-->
					<!--						<n-popover :overlap="overlap" placement="right"  >-->
					<!--							<template #trigger>-->
					<!--						<div class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">-->
					<!--							<div class="flex h-full">-->
					<!--								<div class="m-auto text-center">-->
					<!--									<SvgIcon icon="ep:menu" width="28" height="28" />-->
					<!--								</div>-->
					<!--							</div>-->
					<!--						</div>&lt;!&ndash;&ndash;&gt;-->
					<!--							</template>-->
					<!--							<span  class="text-[#4b9e5f] dark:text-[#86dfba]">Prompt模板</span>-->

					<!--						</n-popover>-->
					<!--					</span>-->


					<span :class="{ 'text-2xl text-[#4b9e5f] dark:text-[#86dfba] iconify iconify--ri': activeIndex === 3 }"
						@click="handleButtonClick(3)"><!---->
						<n-popover :overlap="overlap" placement="right">
							<template #trigger>
								<div
									class="h-12 w-12 cursor-pointer rounded-xl bg-[#E7ECF6] duration-300 dark:bg-[#34373c]">
									<div class="flex h-full">
										<div class="m-auto text-center">
											<SvgIcon icon="fluent:draw-image-24-filled" width="28" height="28" />
										</div>
									</div>
								</div>
							</template>
							<span class="text-[#4b9e5f] dark:text-[#86dfba]">AI绘画工具</span>
						</n-popover>
					</span>
				</div>
			</main>
			<div>
				<NButton style="border: none; border-radius: 20px;" block @click="showPoPup">
					联系我们
				</NButton>
				<br>
			</div>

			<div v-if="userInfo && userInfo.userId">
				<NButton style="border: none; border-radius: 20px;" block @click="showUserTradeCenter">
					消费记录
				</NButton>
				<br>
			</div>

			<!--			<div v-if=" userInfo && userInfo.id" >-->
			<!--				<NButton style="border: none; border-radius: 20px;" block @click="showUserMoney">-->
			<!--					会话记录-->
			<!--				</NButton>-->
			<!--				<br>-->
			<!--			</div>-->

			<!-- <button @click="changeTheme"
				class="flex h-8 w-8 items-center mb-5 justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]">
									<span class="text-base text-slate-500 dark:text-slate-400">
										<svg xmlns="http://www.w3.org/2000/svg"
												 xmlns:xlink="http://www.w3.org/1999/xlink"
												 aria-hidden="true" role="img"
												 class=" iconify iconify--fluent" width="1em"
												 height="1em" viewBox="0 0 24 24"><path
											fill="currentColor"
											d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm0-1.5v-17a8.5 8.5 0 0 1 0 17Z"></path>
										</svg>
									</span>
			</button> -->

			<!--			浮现显示主题选择-->
			<!-- <n-popover v-if="false" :overlap="overlap" placement="right" trigger="click" >
				<template #trigger>
					<button @click="changeTheme"
									class="flex h-8 w-8 items-center mb-5 justify-center rounded border transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]">
									<span class="text-base text-slate-500 dark:text-slate-400">
										<svg xmlns="http://www.w3.org/2000/svg"
												 xmlns:xlink="http://www.w3.org/1999/xlink"
												 aria-hidden="true" role="img"
												 class=" iconify iconify--fluent" width="1em"
												 height="1em" viewBox="0 0 24 24"><path
											fill="currentColor"
											d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm0-1.5v-17a8.5 8.5 0 0 1 0 17Z"></path>
										</svg>
									</span>
					</button>
				</template>

				<template v-for="item of themeOptions" :key="item.key">
					<NButton
						size="small"
						:type="item.key === setTheme ? 'primary' : undefined"
						@click="appStore.setTheme(item.key)">
						<template #icon>
							<SvgIcon :icon="item.icon" />
						</template>
					</NButton>
				</template>
			</n-popover> -->

			<div v-if="userInfo && userInfo.userId">
				<NButton style="border: none; border-radius: 20px;" block @click="showUserCenter">
					个人中心
				</NButton>
			</div>
			<div v-else>
				<NButton style=" border: none " block @click="login">
					{{ $t('store.loginButton') }}
				</NButton>
			</div>
		</div>
	</div>
	<PoPupDialogs v-model:visible="show"></PoPupDialogs>
	<userCenter v-model:visible="showUserInfo" />
	<tradeCenter v-model:visible="showTradeCenter" />
</template>
<style>
.left-div {
	height: 100%;
	width: 70px;
	float: left;
	z-index: 9999999;
	background-color: #ddd;
	/* Change this to preferred color */
}

.main-content {
	margin-left: 80px;
	height: 100%;
}

.container {
	height: 93%;
	overflow: auto;
}</style>
